<template>
  <div class="uploadCommodity">
    <!-- 选择课程 -->
    <el-dialog
      class="uploadIMG"
      title="选择课程"
      :lock-scroll="true"
      :visible.sync="dialogVisible"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
      center
      width="60%"
    >
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          :label="item.name"
          :name="item.id"
          v-for="(item, index) in tabsList"
          :key="item.id"
        >
          <div v-show="item.id == '0'">
            <div class="searchbox">
              <el-form ref="cataformdata" v-model="cataformdata" inline>
                <el-form-item label="名称">
                  <el-input
                    placeholder="请输入要搜索的名称"
                    v-model="cataformdata.name"
                    class="input-with-select"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-select
                    v-model="sectionValue"
                    @change="changeSection"
                    clearable
                    placeholder="请选择学段"
                  >
                    <el-option
                      v-for="item in sectionList"
                      :key="item.id"
                      :label="item.tagEnumName"
                      :value="item.id + '-' + item.tagId + '-' + item.tagEnumCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="">
                  <el-select v-model="subjectValue" clearable placeholder="请选择科目">
                    <el-option
                      v-for="item in subjectList"
                      :key="item.id"
                      :label="item.tagEnumName"
                      :value="item.tagId + '-' + item.tagEnumCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="">
                  <el-select v-model="gradeValue" clearable placeholder="请选择年级">
                    <el-option
                      v-for="item in gradeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.tagId + '-' + item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="serchCatau"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="catalogList" style="width: 100%; margin-bottom: 20px">
              <el-table-column label="序号" prop="itemOrder" />
              <el-table-column label="图片">
                <template slot-scope="scope">
                  <el-image style="width: 80px; height: 80px" :src="scope.row.fileUrl" />
                </template>
              </el-table-column>
              <el-table-column label="名称" prop="name" />
              <!-- <el-table-column label="课程介绍" prop="introduce" /> -->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="uploadInformation(scope.row)"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="cataformdata.pageSize"
              :current-page="cataformdata.pageNum"
              @current-change="xkcpSetPage"
            ></el-pagination>
          </div>
          <div v-show="item.id == '1'">
            <div class="searchbox">
              <el-form ref="courseformdata" v-model="courseList" inline>
                <el-form-item label="名称">
                  <el-input
                    placeholder="请输入要搜索的名称"
                    v-model="courseformdata.name"
                    class="input-with-select"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-select
                    v-model="sectionValue"
                    @change="changeSection"
                    clearable
                    placeholder="请选择学段"
                  >
                    <el-option
                      v-for="item in sectionList"
                      :key="item.id"
                      :label="item.tagEnumName"
                      :value="item.id + '-' + item.tagId + '-' + item.tagEnumCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="">
                  <el-select v-model="subjectValue" clearable placeholder="请选择科目">
                    <el-option
                      v-for="item in subjectList"
                      :key="item.id"
                      :label="item.tagEnumName"
                      :value="item.tagId + '-' + item.tagEnumCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="">
                  <el-select v-model="gradeValue" clearable placeholder="请选择年级">
                    <el-option
                      v-for="item in gradeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.tagId + '-' + item.code"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" @click="serchCatau"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="courseList" style="width: 100%; margin-bottom: 20px">
              <el-table-column label="序号" prop="itemOrder" />
              <el-table-column label="图片">
                <template slot-scope="scope">
                  <el-image style="width: 80px; height: 80px" :src="scope.row.fileUrl" />
                </template>
              </el-table-column>
              <el-table-column label="名称" prop="name" />
              <!-- <el-table-column label="课程介绍" prop="introduce" /> -->
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="uploadInformation(scope.row)"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="courseformdata.pageSize"
              :current-page="courseformdata.pageNum"
              @current-change="zxkcSetPage"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCataloguesList,
  getFirstLevels,
  getChildrenList,
  getSection,
} from "@/api/basisMG";
export default {
  name: "UploadCommodity",
  data() {
    return {
      activeName: "first",
      dialogVisible: false, // 弹框默认隐藏
      dialogImageUrl: {}, // 选择的数据
      type: "",
      uploadShow: false, // 是否显示上传图片
      tabsList: [
        {
          id: "0",
          name: "学科产品",
        },
        {
          id: "1",
          name: "专项课程",
        },
      ], // 选择跳转类型
      externalLink: null,
      emptyText: "",
      catalogList: [], //学科产品
      courseList: [], //专项课程
      cataformdata: {
        pageNum: 1,
        pageSize: 10,
        endTime: "",
        name: "",
        startTime: "",
        level: 1,
        tags: "",
        type: 5,
      },
      courseformdata: {
        pageNum: 1,
        pageSize: 10,
        endTime: "",
        name: "",
        startTime: "",
        level: 1,
        tags: "",
        type: 3,
      },
      sectionList: [], // 学段
      gradeList: [], // 年级
      subjectList: [], // 科目
      sectionValue: "",
      gradeValue: "",
      subjectValue: "",
      total: 0,
    };
  },
  computed: {
    // 提交按钮是否可以点击
    disabl() {
      if (!this.dialogImageUrl) return true;
      return false;
    },
  },
  created() {},
  methods: {
    handleClick(tab) {
      if (tab.name == "0") {
        this.getCataloguesList();
      } else {
        this.getCourseList();
      }
    },
    // 分页3
    xkcpSetPage(e) {
      this.cataformdata.pageNum = e;
      this.getCataloguesList();
    },
    // 分页4
    zxkcSetPage(e) {
      this.courseformdata.pageNum = e;
      this.getCourseList();
    },
    selectType() {
      // 清空 options
      this.options = [];
    },
    /* 显示上传文件组件 */
    showUpload() {
      this.dialogVisible = true;
    },
    // 学科产品搜索
    serchCatau() {
      this.cataformdata.tags =
        this.sectionValue.slice(17, 29) + "," + this.gradeValue + "," + this.subjectValue;
      this.getCataloguesList();
    },
    /* 传递图片地址 */
    uploadInformation(e) {
      this.dialogImageUrl.name = e.name;
      this.dialogImageUrl.coverUrl = e.fileUrl;
      // this.dialogImageUrl.introduce = e.introduce;
      // this.dialogImageUrl.httpType = e.type;
      this.$emit("uploadListInformation", this.dialogImageUrl);
      // 隐藏上传弹框
      this.dialogVisible = false;
      this.uploadShow = false;
      this.dialogImageUrl = {};
    },
    // 关闭弹框
    handleClose() {
      this.$confirm("点击关闭后您的选择将丢失，您确定关闭？")
        .then(() => {
          // 隐藏上传文件
          this.dialogVisible = false;
          this.dialogImageUrl = {};
        })
        .catch(() => {});
    },

    // 获取学科产品列表
    async getCataloguesList() {
      const res = await getCataloguesList(this.cataformdata);
      let catalogArr = res.data.content;
      this.total = res.data.total;
      this.getFirstLevels();
      this.getGradeList();
      let wlength = 0,
        tempIds = [];
      for (wlength in catalogArr) {
        let clength,
          cdata = catalogArr[wlength].tags;
        for (clength in cdata) {
          let lindd = catalogArr[wlength].tags[clength].tagId,
            sss = catalogArr[wlength][lindd];
          if (sss === undefined) {
            sss = "";
          }
          catalogArr[wlength][lindd] = sss + " " + cdata[clength].enumName;
        }
        // 获取所有列表
        tempIds.push(catalogArr[wlength]);
        this.catalogList = tempIds;
      }
    },
    //  获取学段
    async getFirstLevels() {
      const res = await getFirstLevels({ templateId: "1360833972011046" });
      this.sectionList = res.data;
    },
    changeSection(e) {
      this.getChildrenList();
    },
    //  获取某个学段下的科目
    async getChildrenList() {
      const res = await getChildrenList({
        levelIds: this.sectionValue.slice(0, 16),
        templateId: "1360833972011046",
      });
      this.subjectList = res.data;
    },
    //  获取年级
    async getGradeList() {
      const res = await getSection({ id: "grade", codes: "" });
      this.gradeList = res.data.tagEnumVoList;
    },
    // 获取专项课程列表
    async getCourseList() {
      const res = await getCataloguesList(this.courseformdata);
      let couseArr = res.data.content;
      this.total = res.data.total;
      this.getFirstLevels();
      this.getGradeList();
      let wlength = 0,
        tempIds = [];
      for (wlength in couseArr) {
        let clength,
          cdata = couseArr[wlength].tags;
        for (clength in cdata) {
          let lindd = couseArr[wlength].tags[clength].tagId,
            sss = couseArr[wlength][lindd];
          if (sss === undefined) {
            sss = "";
          }
          couseArr[wlength][lindd] = sss + " " + cdata[clength].enumName;
        }
        // 获取所有列表
        tempIds.push(couseArr[wlength]);
        this.courseList = tempIds;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/mixin.scss";
.uploadCommodity {
  // 上传弹框内容部分
  .uploadIMG .el-dialog__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: center;
  }

  .disable {
    .el-upload {
      display: none !important;
    }
  }
}
</style>
